<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../jd-icon/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            width: 100%;
            height: 60px;
            background: red;
            display: flex;
        }

        .left {
            color: #fff;
            line-height: 60px;
            font-size: 40px;
            /* background: burlywood; */
            /* width: 10%; */
            padding: 0 10px;
        }

        .conts {
            flex: 1;
            /* background: chocolate; */
            padding: 0 10px;
            line-height: 60px;
            position: relative;
        }

        .conts>input {
            width: 100%;
            height: 40px;
            border-radius: 10px;
            outline: none;
            border: none;
            padding-left: 60px;
            font-size: 18px;

        }

        .search {
            position: absolute;
            top: 0;
            left: 50px;
        }

        .jd {
            position: absolute;
            top: 0;
            left: 18px;
            color: red;
        }

        .search::after {
            content: "";
            width: 2px;
            height: 30%;
            background: #eee;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -5px;
        }

        .right {
            color: #fff;
            line-height: 60px;
            font-size: 40px;
            /* background: burlywood; */
            /* width: 10%; */
            padding: 0 10px;
            font-size: 18px;
        }

        .center {
            width: 100%;
            min-width: 320px;
            max-width: 540px;
            /* margin: 0 a; */
            margin: 0 auto;
            /* background: orange; */
            /* padding-top: 50px; */

        }




        .barnner {
            width: 100%;
        }

        .barnner>img {
            width: 100%;
        }

        .int {
            display: flex;
            flex-wrap: wrap;
        }

        .int>div {
            width: 20%;
            /* border: 1px solid orangered; */
            margin-top: 20px;
            text-align: center;
        }

        .int>div>img {
            width: 60%;
        }

        .int>div>p {
            margin-top: 0.3rem;
            font-size: .6rem;
            color: #666;
        }

        .cont {
            display: flex;
            flex-wrap: wrap;
            text-align: center;
        }

        .cont>div {
            width: 50%;
            /* height: 50%; */

            border: 1px solid red;
            margin-top: 50px;
        }

        .cont>div>img {
            width: 80%;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="icon iconfont left">&#xeaf1;</div>
        <div class="conts">
            <span class="icon iconfont jd">&#xe612;</span>
            <span class="icon iconfont search">&#xe62f;</span>
            <input type="text">
        </div>
        <div class="right">登录</div>
    </header>
    <main class="center">
        <div class="barnner">
            <img src="./b.jpg" alt="">
        </div>
        <div class="int">
            <div>
                <img src="./upload/nav1.webp" alt=""></img>
                <p>超市</p>

            </div>

        </div>
        <div class="cont">
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
            <div>
                <img src="./it.png" alt="">
                <p></p>
                <span></span>
            </div>
        </div>
    </main>
    <script src="./jd.js"></script>
</body>

</html>